<template>
    <section>
        <el-form ref="outputData" :model="outputData" label-width="93px" size="small">

            <el-form-item label="项目名"  prop="name">
                <el-col :span="24">
                    <el-tag type="default" size="mini" >{{outputData.name}}</el-tag>
                    <!--<el-button size="mini" @click="closeThisTab"><i class="fa fa-close" style="color:red;"></i></el-button>-->
                    <!--<el-tag @click="closeThisTab" size="mini" type="danger"><i class="fa fa-close" size="mini"></i></el-tag>-->
                </el-col>

            </el-form-item>



            <el-form-item label="#构建历史"  prop="name">
                <el-col :span="4">
                    <el-select v-model="currentid" placeholder="尚未构建" @change="changeItemOutput" style="width: 100%">
                        <el-option
                                v-for="item in outputData.options"
                                :label="'#' + item.id + '    ' + item.mdtime"
                                :value="item.id">
                            <span style="float: left ; font-weight: bold" v-if="item.status==='成功'"><i class="fa fa-circle" style="font-size:13px;color: green"></i>&nbsp;#{{ item.id }}</span>
                            <span style="float: left ; font-weight: bold" v-else-if="item.status==='失败'"><i class="fa fa-circle" style="font-size:13px;color: red"></i>&nbsp;#{{ item.id }}</span>
                            <span style="float: left ; font-weight: bold" v-else-if="item.status==='构建中'"><i class="fa el-icon-loading" style="font-size:13px;color:blue"></i>&nbsp;#{{ item.id }}</span>
                            <span style="float: left ; font-weight: bold" v-else><i class="fa fa-circle" style="font-size:13px;color: #A8A8A8"></i>&nbsp;#{{ item.id }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mdtime }}</span>
                        </el-option>
                    </el-select>
                </el-col>


            </el-form-item>
            <el-form-item label="控制台输出"  prop="content">
                <el-col :span="24">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 28}"
                            placeholder=""
                            v-model="content"
                            readonly
                    >
                    </el-input>
                </el-col>

            </el-form-item>
            <el-form-item>
                <el-button @click="closeThisTab" size="mini" type="default" plain>关闭</el-button>
            </el-form-item>

        </el-form>


    </section>
</template>
<script>

    import { LoadOutput,LoadTemplateFile } from '../../api/api'
    export default {
        props: {
            deployItem: Object,

        },
        data() {
            return {
                bool:true,
                outputData: {
                    name: '',
                    options:[],
                },
                currentid: '',
                content: "",
                buildpath: "",
            }
        },
        methods: {

            closeThisTab() {
                this.$emit('close_tab')
            },
            getOutputData(name) { //远程加载模板文件
                let self = this
                let param = {name: name}

                LoadOutput(param).then((res) => {
                        console.log(res)
                        self.currentid = res.outputList[0].id
                        self.outputData.options = res.outputList
                        //this.buildpath = res.outputList[0].path

                    let uri = "/" + res.outputList[0].path

                    console.log("uri is ....." , uri)

                    LoadTemplateFile(uri).then((res) => {
                            console.log(res)
                            //this.filedata.content = res
                            self.content = res
                        }
                    )

                    }
                )




            },
            changeItemOutput() {
                //console.log(this.currentid)
                let self = this
                let newid = this.currentid
                let out = this.outputData.options.filter(function (val) {
                    //console.log("val is " , val.id)
                    if (val.id === newid) {
                        return val
                    }
                    })
                console.log("the path is" , out[0].path)
                let uri = "/" + out[0].path
                LoadTemplateFile(uri).then((res) => {
                        console.log(res)
                        self.content = res
                    }
                )


            }

        },
        created() {
            // console.log("this item is",this.deployItem)
            this.outputData.name = this.deployItem.name
            //this.workspaceData.workpath = this.deployItem.yamlpath
            this.getOutputData(this.deployItem.name)
        },


    }
</script>

